import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  // Mutation 用于变更 Store中 的数据。 
  // 只有mutations中定义的函数 才有权力修改state中的数据 不可以直接操作 Store 中的数据
  mutations: {
    add(state) {
      state.count++
    },
    // 在触发 mutations 时传递参数
    addN(state, step) {
      state.count += step
    },
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= step
    },
  },
  ///用于处理异步函数
  //在actions中 不能直接修改state中的数据 
  // 必须通过context.commit()修改某个mutation
  actions: {
    addAsync(context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    },
    addNAsync(context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    },
    subAsync(context) {
      setTimeout(() => {
        context.commit('sub')
      }, 1000)
    },
    subNAsync(context, step) {
      setTimeout(() => {
        context.commit('subN', step)
      }, 1000)
    },
  },
  //   Getter 用于对 Store 中的数据进行加工处理形成新的数据。
  // ① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
  // ② Store 中数据发生变化，Getter 的数据也会跟着变化。
  getters: {
    showNum: state => {
      return '当前count的最新值为' + state.count
    }
  }
})
